<template>
  <div>
    <!--面包屑导航-->
    <el-breadcrumb separator="/" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px">
      <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item><a href="/">系统管理</a></el-breadcrumb-item>
      <el-breadcrumb-item>部门管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片-->
    <el-card class="box-card">

      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="部门名称" label-width="70px">
          <el-input v-model="formInline.name" placeholder="请输入部门名称"></el-input>
        </el-form-item>
        <el-form-item style="margin-left: 10px">
          <el-button icon="el-icon-refresh" v-on:click="clearCondition">重置</el-button>
          <el-button type="primary" icon="el-icon-search" v-on:click="queryAllDeptByCondition">查询</el-button>
          <el-button type="success" icon="el-icon-plus" @click="addDept">添加</el-button>
          <el-button type="warning" icon="el-icon-download">导出</el-button>
        </el-form-item>
      </el-form>

      <!--表格内容显示区域-->
      <el-table
        :data="deptList"
        border
        max-height="400px"
        style="width: 100%;height: 420px;">
        <el-table-column
          prop="id"
          label="id"
          width="50">
        </el-table-column>
        <el-table-column
          sortable
          prop="name"
          label="名称"
          width="110">
        </el-table-column>
        <el-table-column
          prop="address"
          label="地址"
          width="180">
        </el-table-column>
        <el-table-column
          sortable
          prop="username"
          label="部门主管"
          width="180">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="电话"
          width="180">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-edit" @click="editDept(scope.row.id)">修改</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete" @click="delDept(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="padding-top: 15px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>

    <el-dialog
      width="40%"
      :visible.sync="dialogVisible">
      <div style="height: 360px;">
        <span class="title">新增部门</span>
        <el-form :model="deptFrom" label-width="80px">
          <div>
            <el-form-item label="部门主管" label-width="70px">
              <el-input v-model="deptFrom.mgrId" placeholder="请输入部门主管" clearable></el-input>
            </el-form-item>
            <el-form-item label="部门名称" label-width="70px">
              <el-input v-model="deptFrom.name" placeholder="请输入部门名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="联系电话" label-width="70px">
              <el-input v-model="deptFrom.phone" placeholder="请输入联系电话" clearable></el-input>
            </el-form-item>
            <el-form-item label="部门地点" label-width="70px">
              <el-input v-model="deptFrom.address" placeholder="请输入部门地点" clearable></el-input>
            </el-form-item>
          </div>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" class="btn_submit" @click="submit">添加</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
  import * as dept from '../api/dept'
  import $ from 'jquery'

  export default {
    name: 'Department',
    data() {
      return {
        pageSize: 2,
        total: 1,
        current: 1,
        formInline: {
          name: '',
        },
        deptFrom: {
          id: '',
          name: '',
          phone: '',
          address: '',
          mgrId: '',
        },
        deptList: null,
        dialogVisible: false,
        pickerOptions1: {
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
      }
    },
    methods: {
      // 提交事件
      onSubmit() {
        console.log('submit!')
      },
      // 当记录数发生改变时
      handleSizeChange(val) {
        this.pageSize = val;
        let name = this.formInline.name;
        this.getDeptList(this.current, this.pageSize, name);
      },
      // 当前页发生改变时
      handleCurrentChange(val) {
        this.current = val;
        let name = this.formInline.name;
        this.getDeptList(this.current, this.pageSize, name);
      },

      // 获取部门数据
      async getDeptList() {
        let name = this.formInline.name;
        const {data} = await dept.queryAllDeptByCondition(this.current, this.pageSize, name);
        this.deptList = data.data.deptPage.records;
        this.total = data.data.deptPage.total;
        this.pageSize = data.data.deptPage.size;
      },

      //搜索按钮  模糊查询部门信息
      async queryAllDeptByCondition() {
        let name = this.formInline.name;
        this.getDeptList(1, this.pageSize, name);
        this.deptList = data.data.deptPage.records;
        this.total = data.data.deptPage.total;
        this.pageSize = data.data.deptPage.size;
      },

      //重置按钮
      async clearCondition() {
        let name = this.formInline.name;
        this.getDeptList(this.current, this.pageSize, name);
      },

      //删除按钮
      async delDept(id) {
        if (confirm("您真的确定要删除吗？\n\n请确认！") == true) {
          await dept.deleteDeptById(id);
          let name = this.formInline.name;
          this.getDeptList(this.current, this.pageSize, name);
        } else {
          return false;
        }
      },

      //添加按钮
      addDept() {
        this.dialogVisible = true;
        if ($(".btn_submit").text() == "编辑") {
          $(".title").text("新增部门")
          $(".btn_submit").text("添加")
        }
        //清空对象的属性的值
        Object.keys(this.deptFrom).forEach(key => this.deptFrom[key] = '');
      },

      //编辑按钮
      async editDept(id) {
        this.dialogVisible = true;
        if ($(".btn_submit").text() == "添加") {
          $(".title").text("编辑部门")
          $(".btn_submit").text("编辑")
        }
        const {data} = await dept.queryDeptById(id);
        this.deptFrom = data.data.dept;
      },

      //添加或修改弹框中的提交按钮   添加或修改dept信息到数据库
      async submit() {
        if ($(".btn_submit").text() == "添加") {
          let url='department/insertDept'
          this.$http.post(url, this.deptFrom).then((res) => {
            let name = this.formInline.name;
            this.getDeptList(this.current, this.pageSize, name);
            this.$message({
              type: "info",
              message: "保存成功",
            });
            this.dialogVisible = false;
          }).catch(ex=>{
            this.$message({
              type: "error",
              message: "保存失败",
            });
          });

        } else {
          //执行修改操作
          this.$http({
            method: 'post',
            url: 'http://localhost:8090/department/updateDeptById',
            data: this.deptFrom
          }).then((result) => {
            //刷新数据
            let name = this.formInline.name;
            this.getDeptList(this.current, this.pageSize, name);
            this.dialogVisible = false;
          }).catch(function (error) {
            console.log(error);
          });
        }


      },
    },
    // create创建完成后钩子函数
    created() {
      this.getDeptList();
    }
  }
</script>

<style scoped>
  .title {
    display: inline-block;
    text-align: center;
    font-size: 18px;
    margin-bottom: 10px;
  }
</style>
